import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import { argTypesView } from "./helpers/helpers";

export const modalDocs = { source: { code: `modal := component.NewModal(component.TitleFromString("Modal Title"))
  modal.SetBody(component.NewText("Modal Body"))
  modal.SetSize(component.ModalSizeLarge)
  modal.Open()`
}}

export const modalFormDocs = { source: { code: `modal := component.NewModal(component.TitleFromString("Modal Title"))
  modal.SetBody(component.NewText("Modal Body"))
  fft := component.NewFormFieldText("textFormLabel", "textFormName", "")
	fft.AddValidator("placeholder", "this is an error", []string{"required"})
  form := component.Form{
    Fields: []component.FormField{
      fft,
    },
  }
  modal.AddForm(form)
  modal.SetAlert(component.NewAlert(component.AlertStatusInfo, component.AlertTypeDefault, "Info alert", false, nil))
  modal.SetSize(component.ModalSizeLarge)
  modal.Open()`
}}

export const textView = {
  config: {
    value: 'Modal Title',
  },
  metadata: {
    type: 'text',
  },
};

export const bodyView = {
  config: {
    value: 'Modal body',
  },
  metadata: {
    type: 'text',
  },
};

export const alertConfig = {
  status: 'info',
  type: 'default',
  message: 'Info Alert'
};

export const modalView = {
  metadata: {
    type: 'modal',
    title: [textView],
  },
  config: {
    body: bodyView,
    alert: alertConfig,
    opened: true,
    size: 'lg',
  },
};

export const formFields = {
  fields: [
    {
      configuration: {},
      error: 'this is an error',
      label: 'textFormLabel',
      name: 'textFormName',
      placeholder: 'placeholder',
      type: 'text',
      validators: ["required"],
      value: '',
    },
  ],
};

export const modalFormView = {
  metadata: {
    type: 'modal',
    title: [textView],
  },
  config: {
    body: bodyView,
    form: formFields,
    opened: true,
    size: 'lg',
  },
};

export const ModalStoryTemplate = args => ({
  template: `<div><app-view-modal [view]= "view"></app-view-modal></div>`,
  argTypes: argTypesView,
  props: { view: args.view },
});

<h1>Modal component</h1>
<h2>Description</h2>

<p>The modal component provides a modal</p>
<p>A modal component can optionally show an alert on the top of the component.</p>
<h2>Example</h2>

<Meta title="Components/Modal" argTypes = { argTypesView } />

<Canvas withToolbar>
<Story name="Modal component"
       parameters={{ docs: modalDocs }}
       height="500px"
       args= {{ view: modalView }}>
  { ModalStoryTemplate.bind({}) }
</Story>
</Canvas>

<h2>Props</h2>
<ArgsTable story = "Modal component"/>

<p>
Modal Component with a form
</p>

<Canvas withToolbar>
  <Story name="Modal component with form"
         parameters={{ docs: modalFormDocs }}
         height="500px"
         args= {{ view: modalFormView }}>
    { ModalStoryTemplate.bind({}) }
  </Story>
</Canvas>

<h2>Props</h2>
<ArgsTable story = "Modal component with form" />
